<template>
	<view class="all_body">
		<view class="bady_header_areatext">
			<textarea value="" placeholder="开始记录..." v-model="text"  />
		</view>
		
		<view class="bady_container">
			<view class="bady_container_title">
			  <view class="bady_container_text">请输入标题</view>
			  <view class="baby_container_input"> <input type="text" value="" v-model="title" /></view>
			</view>
			
			<view class="bady_container_title pic">
			  <view class="bady_container_text">上传图片(仅支持单文件上传且文件不超过200kb)</view>
			  <view class="uploadimg" @click="chooseImage()" v-if="!ischooseImage"> <button type="default">+</button> </view>
			  <view v-for="item in imgPath" :key="item.tempFilePath"><image :src="item.tempFilePath" mode="widthFix"></image></view>
				
			</view>
			
			<view class="bady_container_title fenlei">
			  <view class="bady_container_text">请选择分类</view>
			  <view class="choose" > <picker type="default" mode="selector" :range="listData" @change="chooseList" range-key="title" > {{isChooseList?listData[Classification].title:'选择'}}</picker></view>
			</view>	
		</view>
		
		
<view class="uploadButton">
			<button type="primary" @click="sendNote()">发布笔记</button>
</view>
		
		
		
		
		
		
		
		
		
		
		
		
		
		
	</view>
</template>

<script>
	// import request from '../../static/utils/request.js'
	export default{
		data(){
			return {
				listData:[{title:"美食"},{title:"汽车"},{title:"时尚"},{title:"旅行"},{title:"科技"}],
					text:'',
					title:'',
					imgPath:[],
					ischooseImage:false,
					imgurl:'',
					Classification:0,
					username:'',
					isChooseList:false,
					nowWeather:{}
			
			}
		
		},
		methods:{
			chooseImage(){
				var that = this
				uni.chooseMedia({
				  count: 9,
				  mediaType: ['image','video'],
				  sourceType: ['album', 'camera'],
				  maxDuration: 30,
				  camera: 'back',
				  success(res) {
				    console.log(res	)
					const tempFilePaths = res.tempFiles
					that.imgPath = tempFilePaths
					console.log(tempFilePaths)
					uni.uploadFile({
						  url: 'http://localhost:4008/user/picture', //仅为示例，非真实的接口地址
						            filePath: tempFilePaths[0].tempFilePath,
						            name: 'picture',
						            success: (uploadFileRes) => {
						                console.log(uploadFileRes);
										let data = JSON.parse(uploadFileRes.data)
										that.imgurl = data.url
										that.ischooseImage = true
						            },
								
					})
				  }
				})
			},
			chooseList(e){
				console.log(e)
				this.Classification = e.detail.value
				this.isChooseList = true
			},
			sendNote(){
			
				var that = this
				let date = Date.now()
				console.log(date)
				let dateNow1 = new Date(date)
				let dateNow = dateNow1.toLocaleDateString().replace(/\//g, "-") + " " + dateNow1.toTimeString().substr(0, 8)
	            console.log(this.nowWeather.text)
               if(this.title!==''&&this.text!==''&&this.Classification!==''&&this.isChooseList==true){
				   let parmas = {
				   		title:this.title,
				   		imgsrc:this.imgurl,
				   		text:this.text,
				   		Classification:this.Classification,
				   		user:this.username,
						date:dateNow,
						weather:this.nowWeather.text	
					
				   	}
				    uni.request({
				   	url:"http://localhost:4008/bady/share",
				   	method:"POST",
				   	data:parmas,
				   	success(res) {
				   		console.log(res)
				   		if(res.data.err==0){
				   			uni.showToast({
				   				title:res.data.msg
				   			})
							that.isChooseList = false
							that.title = ''
							that.Classification = 0,
							that.text = '',
							that.imgPath = ''
					       
						
							uni.navigateBack({
								delta:1
							})
				   		}else{
				   			uni.showToast({
				   				title:"发布失败"
				   			})
				   		}
				   	}
				   })
			   }else if(that.username.trim().length==0){
				   uni.showToast({
				   	title:"请先登录",
					icon:"none"
				   })
			   }
			   else{
			   				   uni.showToast({
			   				   	title:"内容不可以为空",
			   					icon:"none"
			   				   })
			   }
			
				
			},
			requestWeatger(){
				let that = this
			let location =	uni.getStorageSync("location")
			console.log(location)
			let longitude = location.longitude
			let latitude = location.latitude
				uni.request({
					url:`https://devapi.qweather.com/v7/weather/now?location=${longitude},${latitude}&key=a449ba18d8184473bcff8953958b1376`,
					success(res) {
						console.log(res.data.now)
						that.nowWeather = res.data.now
					}
				})
			}
		},
		onLoad() {
			var that = this
		    uni.getStorage({
				key:'user',
				success(res) {
					console.log(res)
					that.username = res.data[0].us
				}
			})
				this.requestWeatger()
		}
		
		
		
		
		
		
		
		
	}
</script>

<style lang="less">
	.all_body{
		animation: scal 1s;
	}
	.bady_header_areatext{
		width: 100%;	
		height: 25%;
		background: #ccc;
		font-family: "楷体";
		font-style: italic;
	}
	.bady_container{
		width: 90%;
		height: 60%;
		// background: pink;
		margin: auto;
		.bady_container_title{
			width: 100%;
			height: 200rpx;
			background: white;
			font-size: 34rpx;
			color: #ccc;
			.bady_container_text{
				margin-bottom: 50rpx;
			}
			.baby_container_input{
				border-bottom: 1rpx solid #ccc;
				// line-height: 100rpx;
				input{
					// border-bottom: 1rpx solid #ccc;
				}
			}
		}
			
	}
	.uploadimg{
		button{
			width: 150rpx;
			height: 150rpx;
			font-size: 100rpx;
			line-height: 150rpx;
			text-align: center;
			font-weight: 200;
		}
	}
	.pic{
		height: 300rpx !important;
	}
	.fenlei{
		display: flex;
		justify-content: space-between;
		
	}
	.choose{
		width: 150rpx;
		height: 50rpx;
		background: #00ffd0;
		text-align: center;
		border-radius: 50rpx;
		color: #fff;
	}
	
	.uploadButton{
		width: 100%;
		
	}
	image{
		width: 25%;
		
	}
	@keyframes scal{
		0%{
			transform: translateY(100vh);
		}
		100%{
			transform: translateY(0);
		}
	}
	
	
</style>
